{% extends 'base/base.html' %}
{% load static %}

{% block content %}
    <div class="hero-wrap hero-bread" style="background-image: url({% static 'images/bg_1.jpg' %});">
      <div class="container">
        <div class="row no-gutters slider-text align-items-center justify-content-center">
          <div class="col-md-9 ftco-animate text-center">
          	<p class="breadcrumbs"><span class="mr-2"><a href="{% url 'home' %}">Home</a></span> <span>Contact us</span></p>
            <h1 class="mb-0 bread">Contact us</h1>
          </div>
        </div>
      </div>
    </div>

    <section class="ftco-section contact-section bg-light">
      <div class="container">
      	<div class="row d-flex mb-5 contact-info">
          <div class="w-100"></div>
          <div class="col-md-3 d-flex">
          	<div class="info bg-white p-4">
	            <p><span>Address:</span> 广东省广州市番禺区新造镇兴业大道东855号</p>
	          </div>
          </div>
          <div class="col-md-3 d-flex">
          	<div class="info bg-white p-4">
	            <p><span>Phone:</span> +020-37330010</p>
	          </div>
          </div>
          <div class="col-md-3 d-flex">
          	<div class="info bg-white p-4">
	            <p><span>Email:</span> 不知道@jnu.edu.cn</p>
	          </div>
          </div>
          <div class="col-md-3 d-flex">
          	<div class="info bg-white p-4">
	            <p><span>Website</span> <a href="https://jnu.edu.cn/" target="_blank"></a>jnu.edu.cn</a></p>
	          </div>
          </div>
        </div>
        <div class="row block-9">
          <div class="col-md-6 order-md-last d-flex">
            <form class="bg-white p-5 contact-form" method="post">
              {% csrf_token %}
              <div class="form-group">
                {% if messages %}
                  {% for message in messages %}
                  <span{% if message.tags %} class="{{ message.tags }}"{% endif %} style="color: green">{{ message }}</span>
                  {% endfor %}
                {% endif %}
              </div>
              <div class="form-group">
                {{ form.name }}
              </div>
              <div class="form-group">
                {{ form.email }}
              </div>
              <div class="form-group">
                {{ form.subject }}
              </div>
              <div class="form-group">
                {{ form.message }}
              </div>
              <div class="form-group">
                <input type="submit" value="Send Message" class="btn btn-primary py-3 px-5">
              </div>
            </form>
          </div>
          <div class="col-md-6 d-flex">
          	<div id="map" class="bg-white"></div>
          </div>
        </div>
      </div>
    </section>
{% endblock %}
